@charset "utf-8";


@function r($px){
    @return ($px/40)*1rem;
    
}
@function px($px){
    @return ($px/2)*1px;
    
}
*{
    margin:0;
    padding: 0;
}
.section{
    overflow: hidden;
}
html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
}
.section{
    overflow: hidden;
}
            .music{
                    position: absolute;
                    
                    width: r(60);
                    height:r(60);
                    right: r(40);
                    top:r(50);
                    z-index: 2;
                    img{
                        width: 100%;
                    }
                }
                   .animal-text{
                   width: 108%;
                   position: absolute;
                   left: r(20);
                   top: r(100);
                  
                   
                   img{
                       width: 100%;
                   }
                }
               
                 .ball{
                   
                    width: r(250);
                    position: absolute;
                    top: r(450);
                    left: r(250);
                    
                    img{
                        width: 100%;
                    }
                    
                }
                
                
        
                 .neimu{
                    width: 90%;
                    position: absolute;
                    top: r(800);
                    left: r(30);
                   
                    img{
                        width: 100%;
                    }
                }
                
                  .zhizuo{
                    width: 455%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background: #fff;
                   
                }
               
         .click-liaojie{
        margin-left: r(100);
        position: absolute;
        top: r(-22);
        padding-top: r(40);
      
    }
    
     .duihuakuang{
            position: relative;
            right: r(40);
            margin-top: r(-22);
            z-index: 2;
            img{
                width: r(200);
                height: r(150);
            }
        }
    
  .xiaogui{
            margin-top: r(0);
            position:relative;
            left: r(30);
            &:hover{
                transform: scale(1.2,1.2);
            }
            img{
                width: r(200);
                height: r(250);
            }
        }
#dowebok{
    width: 100%;
    height: 100%;
    position: relative;
    .page1{
        width: 100%;
        height: 100%;
        ul{
            width: 100%;
            height: 100%;
            >.blue{
                width: 22%;
                height: 100%;
                background: #09A1EF;
                
            }
           
            >.bai{
                width: 17%;
                height: 100%;
            }
          
            
        }
        
      
    }
     .page8{
        width: 100%;
        height: 100%;
        position: relative;
        ul{
            width: 100%;
            height: 100%;
            >.blue{
                width: 20%;
                height: 100%;
                background: #09A1EF;
                text-align: center;
                img{
                    position: relative;
                    top:r(30);
                }
                
            }
           
            >.bai{
                width: 20%;
                height: 100%;
                text-align: center;
                background: #F3F3F3;
                
                img{
                    width: 100%;
                   position:relative ;
                   top: r(25);
                }
            }
            >.bai1{
                img{
                    width: auto;
                    position: relative;
                    right: r(30);
                }
                
            }
            >.bai2{
                img{
                    position: relative;
                    top:r(5);
                }
            }
        }
        }
    
    
   
    
    
   
}
   
     
        
        .chuanshiren{
            width: r(100);
            background:  #09A1EF;
            height: 98%;
            margin-right: r(20);
           
            p{
                width: 24px;
                color: white;
                text-align: center;
                font-size: r(40);
                margin-left: r(25);
                position: relative;margin-top: r(45);
                font-weight:900;
            }
        }
        .page3 .click-liaojie .xiaogui{
            z-index: 1;
        }
        .beijing{
            width: 100%;
            height: 70%;
            position: absolute;
          bottom: r(100);
           
           
            img{
                width: 100%;
                height: 100%;
                
            }
        }
        .chanpin{
            width: 100%;
            position: absolute;
            bottom: r(-180);
           
          
            img{
                width: 105%;
                height: 100%;
            }
        }
            .yuan{
                width: r(400);
               
                position: absolute;
                left: 50%;
                top: 30%;
                margin-left: r(-210);
                margin-top: r(-250);
                img{
                    width: 100%;
                    height: 100%;
                }
                
            }
            .page4{
                overflow: hidden;
            }
            .chuanshiren4{
            width: r(100);
            background:  #fff;
            height: 90%;
            margin-left: r(30);
            position: absolute;
            top: 0;
           
           
            p{
                width: 24px;
                color:  #09A1EF;
                text-align: center;
                font-size: r(45);
                margin-left: r(25);
                position: relative;
                margin-top: r(45);
                font-weight:900;
            }
        }
        .beijing4{
            width: 100%;
            height:99%;
            position: absolute;
          bottom: r(-80);
          left: r(-80);
           
           
            img{
                width: 150%;
                height: 100%;
                
            }
        }
      
        .chanpin4{
            width: 110%;
            position: absolute;
            bottom: r(-180);
            left: r(-21);
           
          
            img{
                width: 100%;
                height: 100%;
            }
        }
            .yuan4{
                width: r(500);
                
                position: absolute;
                left: 50%;
                top:50%;
                margin-left: r(-250);
                margin-top: r(-250);
                img{
                    width: 100%;
                }
                
            }
             .click-liaojie4{
      
        position: absolute;
        top: r(0);
        padding-top: r(40);
        right: r(0);
        z-index: 1;
        
      
    }
      .guiji{
            width: r(250);
            height: r(120);
            background: #FEC36E;
            position: relative;
            top: r(50);
            
         
        }
    
     .duihuakuang4{
            position: relative;
            left: r(155);
           bottom: r(45);
            
            z-index: 2;
            img{
                width: r(200);
                height: r(150);
            }
        }
    
  .xiaogui4{
            margin-top: r(0);
            position:relative;
            left: r(80);
           
            img{
                width: r(150);
                height: r(200);
            }
        }
        .chuanshiren5{
            @extend .chuanshiren4;
            background: #2296ED;
            height: 100%;
            p{
                color: #fff;
               
            }
        }
        .beijing5{
            width: 100%;
            position: absolute;
            bottom: 0;
            
            img{
                width: 122%;
                position:relative;  
                right: r(113);
              
            }
        }
        .yuan5{
            @extend .yuan4;
            margin-top: r(-320);
        }
        
        .chuanshiren6{
            @extend .chuanshiren;
            background: #fff;
            p{
                color: #08A1ef;
            }
        }
        .beijing6{
            width: 100%;
            height: 100%;
            position: relative;
            img{
                position: absolute;
               bottom: 0;
               left: -3.8em;
               height: 85%;
            }
        }
        .yuan6{
            @extend .yuan;
            width: 13em;
            margin-left: -6.25em;
            margin-top: -3.25em;
        }
        .click-liaojie6{
            @extend .click-liaojie;
            top: r(10);
            margin-left: 2em;
            
        }
        
        .beijing7{
            width: 100%;
            height: 100%;
            position: relative;
            img{
                width: 150%;
                height: 90%;
                position: absolute;
                bottom:r(-50);
                left: r(-145);
            }
            
        }
        .yuan7{
            @extend .yuan5;
            margin-top: -12em;
            width: 13.5em;
            
        }
        
      .bottom-animal{
          position: absolute;
          bottom: 0;
          font-size: 0;
          
      }
      .niu{
          position: absolute;
          bottom: 0;
          left: 0;
      }
       .niao{
          position: absolute;
          bottom:-35px;
          left: px(80);
          font-size: 0;
      }
       .wa{
          position: absolute;
          bottom: 0;
          left:120px;
      }
       .bainiu{
          position: absolute;
          bottom: 0;
          left:180px;
      }
      .daxiang{
             position: absolute;
          bottom: -20px;
          left:230px;
      }
      .pao{
             position: absolute;
          bottom: 0;
          left:290px;
      }
      
      
      .page9{
          background: url(../img/yq0KA1S0jQmAO_m1AAC_KGI1KnM085.jpg) no-repeat;
          position: relative;
          background-size: 100% 100%;
      }
      .neimu-text{
          width: r(700);
          position: absolute;
          top: 100px;
          left: 0;
          right: 0;
          margin: 0 auto;
          text-align: center;
          height: 75px;
          border-bottom: 1px solid #878787;
          p{
              color: white;
          }
      }
      .animal-city{
          width: 170px;
          margin: 0 auto;
          
      }
      .jubao{
          position: relative;
          top: r(420);
          left: 20px;
          a{
              color: #878787;
              text-decoration: none;
          }
      }
      .btn-zhizuo{
          margin: 0 auto;
          width: 250px;
          position: relative;
          top: r(350);
          button{
              width: 250px;
              height: r(80);
              border-radius: 20px;
              background: #000;
              opacity: 0.5;
              font-size: 20px;
              color:#08A1EF;
              outline: none;
              
          }
      }
      
      
        
    
        
     
           